<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2024-09-13 15:44:40
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-10-09 10:38:32
 * @FilePath: \new-yongqing\src\Views\home\Govern\components\Right.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Right_box>
    <LeaseTitle imgSrc="sheshi.png">公共设施</LeaseTitle>
    <div style="margin-left: 38px; margin-top: 4px">
      <SubTitle title-text="城市设施水平" :width="312" />
      <div class="analysis-div">
        <div class="analysis-box">
          <div class="analysis-row">
            <div class="analysis-item">
              <div class="label">
                城市供水普及率
                <div class="suffix">队</div>
              </div>
              <div class="value">10</div>
            </div>
            <div class="analysis-item">
              <div class="label">
                城市燃气普及率
                <div class="suffix">处</div>
              </div>
              <div class="value">10</div>
            </div>
          </div>
        </div>
        <div class="analysis-box">
          <div class="analysis-row">
            <div class="analysis-item">
              <div class="label">
                人均公园绿地面积
                <div class="suffix">队</div>
              </div>
              <div class="value">10</div>
            </div>
            <div class="analysis-item">
              <div class="label">
                人均道路面积
                <div class="suffix">处</div>
              </div>
              <div class="value">350</div>
            </div>
          </div>
        </div>
        <div class="analysis-box">
          <div class="analysis-row">
            <div class="analysis-item">
              <div class="label">
                公共汽车/万人
                <div class="suffix">队</div>
              </div>
              <div class="value">10</div>
            </div>
            <div class="analysis-item">
              <div class="label">
                公共厕所/万人
                <div class="suffix">处</div>
              </div>
              <div class="value">10</div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 67px">
        <SubTitle title-text="城市供电情况" :width="312" />
        <V3Echarts
          :height="790"
          :width="602"
          :options="Option2()"
          container="Option2"
        ></V3Echarts>
      </div>
    </div>
  </Right_box>
</template>

<script lang="ts" setup>
import Right_box from '@/components/right_box.vue'
import LeaseTitle from '@/components/Lease_title/index.vue'
import SubTitle from '@/components/SubTitle/SubTitle.vue'
import { Option2 } from './echartsoptions'
</script>

<style lang="scss" scoped>
.analysis-div {
  display: grid;
  .analysis-box {
    // @include Padding(30, 0, 0, 20);
    padding: 46px 0px 0px 0px;
    .analysis-row {
      display: flex;

      .analysis-item {
        display: flex;
        position: relative;
        width: 280px;
        height: 80px;
        margin-right: 36px;
        &:nth-child(even) {
          @include MarginRight(0);
        }

        &::after {
          content: '';
          background: url('~@/assets/images/治理有效/flat_bg_s_6@2x.png')
            no-repeat;
          background-size: 100% 100%;
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 12px;
        }

        .label {
          display: flex;
          flex-direction: column;
          color: #ffffff;
          font-size: 18px;

          .suffix {
            color: #93c0ec;
            margin-top: 10px;
          }
        }

        .value {
          font-size: 42px;
          margin-left: auto;
          font-family: Tencent, serif;
          margin-bottom: 10px;
          background-image: -webkit-linear-gradient(top, #ffffff, #86c1ff);
          -webkit-background-clip: text;

          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}
</style>
